<template>
	<view class="container">
		<view>
			<desc-wrapper :title="title" :desc="desc"></desc-wrapper>
			<z-card>
				<view class="greentext">
					<image :style="{margin: '80rpx 32rpx 112rpx 32rpx',width:'calc(100% - 64rpx)'}"
						src="@/static/image/yaogua/tongqian3x.png" mode="widthFix"></image>
					<view style="margin-bottom: 118rpx;">
						什么是金钱卦：金钱卦是六爻占卜中的简易算法，即双掌合住六枚铜钱摇而掷出成卦。什么时候停止摇卦，全凭自己心念之所至，易经摇卦，贵在随机而动，占卜方能感应所求。
					</view>
				</view>
			</z-card>
			<view class="bottom-btns">
				<view class="start-btn" @click="onClick_1">
					<text class="">摇卦占卜</text>
				</view>
			</view>
		</view>
		<!-- 底部tabbar -->
		<u-tabbar :value="value1" @change="change1" inactive-color="#7C8491" activeColor="#275515" :fixed="true"
			:placeholder="false" :safeAreaInsetBottom="false">
			<u-tabbar-item v-for="(item,idx) in tabList" :text="item.labelText" @click="navigatorTo">
				<image class="u-page__item__slot-icon" slot="active-icon" :src="item.activeIconPath"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.iconPath"></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '摇卦占卜',
				desc: '卜卦方法：静默一分钟，心念集中于你所测之事，如爱情、事业、健康等，然后心念一动，点击立即摇卦，掷出金钱卦，并查看卦辞，请自行体会其中的吉凶指示',
				value1: 1,
				userid: 12345,
				tabList: [{
						labelText: '首页',
						url: '/pages/tabbar/home',
						iconPath: '/static/image/tabbar/tabbar1.png',
						activeIconPath: '/static/image/tabbar/activetabbar1.png'
					},
					{
						labelText: '论坛',
						url: '/pages/tabbar/forum',
						iconPath: '/static/image/tabbar/tabbar2.png',
						activeIconPath: '/static/image/tabbar/activetabbar2.png'

						// activeIconPath: '/static/image/tabbar/activetabbar2.png'
					},
					{
						labelText: '客服',
						url: '/pages/tabbar/service',
						iconPath: '/static/image/tabbar/tabbar3.png',
						activeIconPath: '/static/image/tabbar/activetabbar3.png'
					},
					{
						labelText: '我的',
						url: '/pages/tabbar/mine',
						iconPath: '/static/image/tabbar/tabbar4@3x.png',
						activeIconPath: '/static/image/tabbar/activetabbar4@3x.png'
					}
				],

				constants: {},
			};
		},
		methods: {
			Zhanbu() {

			},

			change1(e) {
				console.log(e,'@@@@@@@@@@@@');
				uni.switchTab({
					url: this.tabList[e].url
				})
			},
			navigatorTo({
				index
			}) {},

			onClick_1() {
				uni.request({
					url: 'https://cs.appzdm.com:3000/Zhanbu/yaogua',
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					data: {
						api_key: 'FsF1CsVevk3N17w7oBkSydfSk'
					},
					success: (res) => {
						uni.navigateTo({
							url: `/pages/yaogua/detail?params=${JSON.stringify(res.data.data)}`
						});
					},
					fail: (error) => {
						console.error('Request Failed:', error);
					}
				});
			},

			onClick_2() {
				alert(1);
			},
		}
	}
</script>

<style lang="scss">
	.greentext {
		color: #275515;
	}

	::v-deep .card-wrapper {
		transform: translateY(-72rpx) !important;
	}

	::v-deep .u-tabbar-item__text {
		font-size: 20rpx;
		line-height: normal;
		margin-top: 3px;
	}

	::v-deep .u-page__item__slot-icon {
		margin-top: 10rpx;
	}

	.u-page__item__slot-icon {
		width: 48rpx;
		height: 48rpx;
	}
</style>